@model CareComplete.Data.Core.ViewModel.PersonLandingFilterModel
@using System.Web.Mvc.Html
@using CareComplete.Web.Constants
@using Kendo.Mvc.UI
@using CareComplete.Data.Core.Constants
@using CareComplete.Data.Core.Enums
@{
    var personInfoUrl = string.Format("{0}{1}", AppSettings.ApiBaseAddress.Value, CareComplete.ApiWrapper.Common.HttpHelper.GetServiceUrlForAction(ApiRouteController.PersonController, ApiRouteAction.PersonControllerGetPersonsByType));
}
<link href="~/Content/css/landingpage.css" rel="stylesheet" />
<link href="~/Content/css/person.css" rel="stylesheet" />

<style type="text/css">
    .person-image-small {
        margin-left: 5px;
    }

    ul.display-inline-block,
    ul.display-inline-block li {
        /* Setting a common base */
        margin: 0;
        padding: 0;
    }

    ul.display-inline-block {
        width: 100%;
    }

        ul.display-inline-block li {
            display: inline-block;
            width: 46%;
            /* For IE 7 */
            zoom: 1;
            *display: inline;
        }

            ul.display-inline-block li.left {
                text-align: right;
                text-align: -webkit-right;
            }

    #go-link-block {
        margin-left: 20px;
        margin-right: 20px;
    }

    .margin-top-offset-label {
        margin-top: 22px;
    }

    .filter-dropdown {
        height: 3.7rem !important;
        border: 1px solid #ccc !important;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        min-width: 200px;
    }

    .textbox-name {
        height: 3.7rem !important;
        border: 1px solid #ccc !important;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        min-width: 200px;
    }


    .position-left-relative {
        float: left;
        position: relative;
    }

    .margin-left-1 {
        margin-left: 1em;
    }
</style>

<div data-bind="event: { keypress: KeyPressedOnName}">
    <div id="fixed-block" style="height:90vh;float:left;position:relative; margin-top:1em;overflow:auto; width:100%">
        <div class="row form-block filter-search__controls" data-bind="with:PersonQueryModel">
            <div class="position-left-relative margin-left-1">
                @Html.LabelFor(model => model.PersonId, htmlAttributes: new { @class = "control-label" })<br />
                @Html.DropDownListFor(model => model.PersonId, (IEnumerable<SelectListItem>)ViewBag.Persons, new { @class = "filter-dropdown", data_bind = "value:PersonId" })@*@class = "dropdown",*@
            </div>
            <div class="position-left-relative margin-left-1">
                @Html.LabelFor(model => model.PersonStatus, htmlAttributes: new { @class = "control-label" })<br />
                @Html.DropDownListFor(model => model.PersonStatusId, (IEnumerable<SelectListItem>)ViewBag.PersonStatusTypes, new { @class = "filter-dropdown", data_bind = "value:PersonStatusId" })@*@class = "dropdown",*@
            </div>
            <div class="position-left-relative margin-left-1">
                @Html.LabelFor(model => model.OfficeId, htmlAttributes: new { @class = "control-label" })<br />
                @Html.DropDownListFor(model => model.OfficeId, (IEnumerable<SelectListItem>)ViewBag.Offices, new { @class = "filter-dropdown", data_bind = "value:OfficeId" })@*@class = "dropdown",*@
            </div>
            <div class="position-left-relative margin-left-1">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label" })<br />
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "textbox-name", data_bind = "value:Name,event: { keypress: $parent.KeyPressedOnName}" } })
            </div>

            <div class="position-left-relative margin-top-offset-label" id="go-link-block">
                <button class="btn btn--change" data-bind="click:$parent.GetResult">Filter</button>
            </div>
            <div class="position-left-relative margin-top-offset-label">
                <button class="btn btn--change" data-bind="click:$parent.ResetFilter">Reset</button>
            </div>
        </div>

        <div class="row navigation-block">
            <div class="col-md-2">
                <a href="#" data-id="employees" data-bind="click: ScrollToEmployees">Employees (<span data-bind="text: EmployeesCount"></span>)</a>
            </div>
            <div class="col-md-2">
                <a href="#" data-id="clients" data-bind="click: ScrollToClients">Clients (<span data-bind="text: ClientsCount"></span>)</a>
            </div>
            <div class="col-md-2">
                <a href="#" data-id="referrals" data-bind="click: ScrollToReferrals">Referrals (<span data-bind="text: ReferralsCount"></span>)</a>
            </div>
            <div class="col-md-2">
                <a href="#" data-id="others" data-bind="click: ScrollToOthers">Others (<span data-bind="text: OthersCount"></span>)</a>
            </div>

        </div>
        <div class="person-listing" style="padding-left:15px">
            <div class="personlist" id="employees">
                <h3 class="flush-top flush-bottom">Employees</h3>
                <hr class="flush-top">
                @(Html.Kendo().ListView<CareComplete.Data.Core.ViewModel.PersonInfo>()
                  .Name("employeeListView").TagName("div")
                  .ClientTemplateId("templatePerson")
                  .Pageable(page =>
                  {
                      page.Messages(mess => mess.Display(Constants.ShowingPersonPerPage + " employees"));
                      page.PageSizes(AppSettings.PagingArray).Messages(mes =>
                      {
                          mes.ItemsPerPage(string.Format(Constants.PersonPerPage, "Employees"));
                          mes.Empty(string.Format(Constants.NoPersonFound, "Employee"));
                      });

                      page.ButtonCount(AppSettings.PagingOptionCount);
                  })
                  .DataSource(dataSource =>
                  {
                      dataSource.Read((read => read.Url(personInfoUrl).Type(HttpVerbs.Get).Data("employeeDataFilter")));
                      dataSource.PageSize(AppSettings.DefaultPageSize);

                  }).Events(events => events.DataBound("onEmployeeDataChange"))
                  .AutoBind(false)//not to load list automatically
                )
            </div>

            <div class="personlist" id="clients">
                <h3 class="flush-top flush-bottom">Clients</h3>
                <hr class="flush-top">
                @(Html.Kendo().ListView<CareComplete.Data.Core.ViewModel.PersonInfo>()
                          .Name("clientListView").TagName("div")
                          .ClientTemplateId("templatePerson")
                          .Pageable(page =>
                          {
                              page.Messages(mess => mess.Display(Constants.ShowingPersonPerPage + " clients"));
                              page.PageSizes(AppSettings.PagingArray).Messages(mes =>
                              {
                                  mes.ItemsPerPage(string.Format(Constants.PersonPerPage, "Clients"));
                                  mes.Empty(string.Format(Constants.NoPersonFound, "Client"));
                              });
                              page.ButtonCount(AppSettings.PagingOptionCount);
                          })
                          .DataSource(dataSource =>
                          {
                              dataSource.Read((read => read.Url(personInfoUrl).Type(HttpVerbs.Get).Data("clientDataFilter")));
                              dataSource.PageSize(AppSettings.DefaultPageSize);

                          }).Events(events => events.DataBound("onClientDataChange"))
                          .AutoBind(false)//not to load list automatically
                )
            </div>

            <div id="referrals" class="personlist">
                <h3 class="flush-top flush-bottom">Referrals</h3>
                <hr class="flush-top">
                @(Html.Kendo().ListView<CareComplete.Data.Core.ViewModel.PersonInfo>()
                          .Name("referralListView").TagName("div")
                          .ClientTemplateId("templatePerson")
                          .Pageable(page =>
                          {
                              page.Messages(mess => mess.Display(Constants.ShowingPersonPerPage + " referrals"));
                              page.PageSizes(AppSettings.PagingArray).Messages(mes =>
                              {
                                  mes.ItemsPerPage(string.Format(Constants.PersonPerPage, "Referral company"));
                                  mes.Empty(string.Format(Constants.NoPersonFound, "Referral company"));
                              });
                              page.ButtonCount(AppSettings.PagingOptionCount);
                          })
                          .DataSource(dataSource =>
                          {
                              dataSource.Read((read => read.Url(personInfoUrl).Type(HttpVerbs.Get).Data("referralDataFilter")));
                              dataSource.PageSize(AppSettings.DefaultPageSize);

                          }).Events(events => events.DataBound("onReferralDataChange"))
                          .AutoBind(false)//not to load list automatically
                )
            </div>

            <div class="personlist" id="others">
                <h3 class="flush-top flush-bottom">Others</h3>
                <hr class="flush-top">
                @(Html.Kendo().ListView<CareComplete.Data.Core.ViewModel.PersonInfo>()
                          .Name("otherListView").TagName("div")
                          .ClientTemplateId("templatePerson")
                          .Pageable(page =>
                          {
                              page.Messages(mess => mess.Display(Constants.ShowingPersonPerPage + " others"));
                              page.PageSizes(AppSettings.PagingArray).Messages(mes =>
                              {
                                  mes.ItemsPerPage(string.Format(Constants.PersonPerPage, "Other persons"));
                                  mes.Empty(string.Format(Constants.NoPersonFound, "Other person"));
                              });
                              page.ButtonCount(AppSettings.PagingOptionCount);
                          })
                          .DataSource(dataSource =>
                          {
                              dataSource.Read((read => read.Url(personInfoUrl).Type(HttpVerbs.Get).Data("otherDataFilter")));
                              dataSource.PageSize(AppSettings.DefaultPageSize);

                          }).Events(events => events.DataBound("onOtherDataChange"))
                          .AutoBind(false)//not to load list automatically
                )
            </div>



        </div>
    </div>
</div>

<script type="text/x-kendo-tmpl" id="templatePerson">
    @*does not matter in other*@
    # var IsOtherPerson,calenderTabId = @((int)PermissionSectionTypes.EmployeeCalender),documentTabId = @((int)PermissionSectionTypes.EmployeeDocumentedEvents),IsReferral="";
    if (PersonType== @((int)PersonTypes.OtherPerson))
    { IsOtherPerson = "hide" }
    else
    {
    IsOtherPerson = ""
    if(PersonType== @((int)PersonTypes.Client))
    {
    calenderTabId = @((int)PermissionSectionTypes.ClientCalender);
    documentTabId = @((int)PermissionSectionTypes.ClientDocumentedEvents);
    }
    else if(PersonType==@((int)PersonTypes.Referral))
    {
    IsReferral = "hide";
    documentTabId = @((int)PermissionSectionTypes.ReferralDocumentedEvents);
    }
    } #
    <div class="media">
        <div class="pull-left media-left">
            @*pull-left discontinued after 3.3*@
            @*<img class="person-image-small" src="${ImageUrl}" alt="${FriendlyName}">*@
        </div>

        <div class="media-body">
            <div class="row" style="margin-top:10px;">
                <div class="col-md-3">
                    <a href="/Person/PersonInfo?id=${Id}&type=${PersonType}">
                        <span class="media-heading ${IsReferral}">${LastName}, </span>
                        <span class="media-heading">${FriendlyName}</span>
                    </a>
                </div>
                <div class="col-md-4 ${IsOtherPerson}">
                    <ul class="display-inline-block">
                        <li class="left">
                            <span>
                                #: OfficeName #
                            </span>
                        </li> |
                        <li>
                            <span class="${PersonStatusClass}">
                                <b>${PersonStatus}</b>
                            </span>
                        </li>
                    </ul>
                </div>

                <div class="col-md-2 ${IsOtherPerson}">
                    <span>
                        <a href="/Person/PersonInfo?id=${Id}&type=${PersonType}&tabId=${calenderTabId}"><i class="fi-calendar ${IsReferral} margin-right-05"></i></a>
                        <a href="/Person/PersonInfo?id=${Id}&type=${PersonType}&tabId=${documentTabId}"><i class="fi-page-filled"></i></a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</script>

@*<script src="~/Scripts/Knockout/LandingPageViewModel.js"></script>*@

<script type="text/javascript">

    var viewModel,employeeListView,clientListView,otherListView,referralListView,landingPageData;

    function scrollToID(id, speed){
        var offSet = 210;
        var targetOffset = $(id).position().top-offSet;
        var temp=targetOffset;
        if(temp<0)
            temp=temp*-1;
        speed = 2000;
        //$('html,body').animate({
        //    scrollTop: $(id).offset().top-offSet},
        //100);
        $('#fixed-block').animate({
            scrollTop: $(id).offset().top-offSet},
        100);
    };

    function ReloadLists() {
        employeeListView.dataSource.page(1);
        clientListView.dataSource.page(1);
        otherListView.dataSource.page(1);
        referralListView.dataSource.page(1);
    };

    // employee
    function employeeDataFilter() {
        landingPageData.QueryModel.type = 1;
        return landingPageData.QueryModel;
    };

    function onEmployeeDataChange(arg) {

        var count = commanListViewUISetting(arg.sender);
        viewModel.EmployeesCount(count);

    };

    // client
    function clientDataFilter() {
        landingPageData.QueryModel.type = 2;
        return landingPageData.QueryModel;
    };

    function onClientDataChange(arg) {
        var count = commanListViewUISetting(arg.sender);
        viewModel.ClientsCount(count);
    };

    // other
    function otherDataFilter() {
        landingPageData.QueryModel.type = 3;
        return landingPageData.QueryModel;
    };

    function onOtherDataChange(arg) {
        var count = commanListViewUISetting(arg.sender);
        viewModel.OthersCount(count);
    };

    // referral
    function referralDataFilter() {
        landingPageData.QueryModel.type = 4;
        return landingPageData.QueryModel;
    };

    function onReferralDataChange(arg) {
        var count = commanListViewUISetting(arg.sender);
        viewModel.ReferralsCount(count);
    };

    function commanListViewUISetting(listView) {

        var count = listView.dataSource.total();
        var page = listView.pager.element;
        // pager to hide
        var pagelinks = $( ".k-link,.k-pager-numbers" );
        var tohide = page.find(pagelinks);
        var pageDropDown = page.find(".k-pager-sizes");
        var pageSize = listView.dataSource.pageSize();
        if (count <=  pageSize) {
            tohide.hide();
            pageDropDown.addClass("padding-left-zero");
            // hide drop down
            if (count == 0) {
                pageDropDown.hide();
            }
            else{
                pageDropDown.show();
            }
        } else {
            tohide.show();
            pageDropDown.show().removeClass("padding-left-zero");
        }
        //set image url
        for(var index=0;index<count;index++){
            var persondata = listView.dataSource.data()[index];
            if(persondata){
                var imageUrl = personImageUrl(persondata.ImageName,persondata.Id,200);
                listView.dataSource.data()[index].set("ImageUrl", imageUrl);
            }
        }
        return count;
    };

    $(function() {


        $(".glyphicon-bell").hide();
        employeeListView = $("#employeeListView").data("kendoListView");
        clientListView = $("#clientListView").data("kendoListView");
        otherListView = $("#otherListView").data("kendoListView");
        referralListView = $("#referralListView").data("kendoListView");
        landingPageData = {
            ReloadData:ReloadLists,
            QueryModel:{}
        };
        viewModel = new LandingPageViewModel(@Html.Raw(Json.Encode(Model)),landingPageData);
        ko.applyBindings(viewModel);

    });
</script>
